<script setup>
import { ref, reactive, onMounted, unref, watch, computed } from 'vue'
import {
  queryClaimList,
  queryAmendClaimList,
  querySubTask,
  queryClaimMissList,
  queryClaimEmail
} from '@/api/home'
import { useAccountStore } from '@/stores/account'
import { useCorePage } from '@/composables/open-link.js'
import { formatColumn } from '@/utils/tools.js'
import {
  subTaskOtherDTOColumns,
  subTaskCIDTOColumns,
  subTaskPEDTOColumns,
  subTaskPRDTOColumns,
  claimFileColumns
} from './home.data'
import { useRoute, useRouter } from 'vue-router'
import { useClaimColumns } from '@/composables/claim.js'
const { dynamicClaimInfoColumns, dynamicInnerColumns } = useClaimColumns()
const props = defineProps({
  insuredInfo: {
    type: Object,
    required: () => {}
  }
})
const route = useRoute()
const router = useRouter()

const accountStore = useAccountStore()

const isEyeOpen = computed(() => {
  return accountStore.DESENSITIZATION
})

function handlePageChange(page, pageSize) {
  pagination.current = page
  pagination.pageSize = pageSize
  expandedRowKeys.value = []

  getClaimData()
}
const pagination = reactive({
  current: 1,
  pageSize: 10,
  size: 'large',
  showSizeChanger: true,
  hideOnSinglePage: true,
  total: 0,
  onChange: handlePageChange
})
const dataSource = ref([])
const innerData = ref([])
const expandedRowKeys = ref([])
const subTaskPEDTOSource = ref([])
const subTaskCIDTOSource = ref([])
const subTaskPRDTOSource = ref([])
const subTaskOtherDTOSource = ref([])
const subTaskData = ref({}) // 子任务
const loading = ref(false)
const subTaskStatusOpen = ref(false)

// 理赔子任务
async function getSubTaskData(claimNumber) {
  let res = null
  loading.value = true
  try {
    const data = { claimNumber: claimNumber }
    res = await querySubTask(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    loading.value = false
  }
  if (res?.isSuccess) {
    subTaskData.value = {
      claimNo: claimNumber
    }
    subTaskPEDTOSource.value = res.data.subTaskPEDTO
    subTaskCIDTOSource.value = res.data.subTaskCIDTO
    subTaskPRDTOSource.value = res.data.subTaskPRDTO
    subTaskOtherDTOSource.value = res.data.subTaskOtherDTO
    console.log(subTaskData.value)
  }
}

// 脱敏
watch(
  () => isEyeOpen.value,
  (newValue, oldValue) => {
    getClaimData()
  }
)
// 切换被保人，重新获取保单信息
watch(
  () => props.insuredInfo.customerId,
  (id) => {
    expandedRowKeys.value = []
    pagination.current = 1
    getClaimData()
  }
)

// 基本信息接口初始化
onMounted(() => {
  getClaimData()
})

const afterOpenChange = (bool) => {
  console.log('open', bool)
}

const showDrawer = (record) => {
  if (!record.claimNo) return
  allClose()
  getSubTaskData(record.claimNo)
  subTaskStatusOpen.value = true
}

// 理赔缺件页
let fileOpen = ref(false)
let fileInfo = ref({
  claimNo: '',
  checkClaimsInputUrl: '',
  firstRegMailSendStatus: null,
  firstRegMailReceiveAddr: null,
  firstRegMailSender: null,
  lastRegMailSendDate: null
})

// 理赔缺件列表
// 获取缺失件-邮件信息
async function getCiaimMissEmailInfo() {
  let res = null
  try {
    const data = {
      claimNumber: fileInfo.value.claimNo
    }
    res = await queryClaimEmail(data)
  } catch (err) {
    console.log('err', err)
  }
  if (res?.isSuccess) {
    const {
      firstRegMailSendStatus,
      firstRegMailReceiveAddr,
      firstRegMailSender,
      lastRegMailSendDate
    } = res.data
    fileInfo.value.firstRegMailSendStatus = firstRegMailSendStatus
    fileInfo.value.firstRegMailSender = firstRegMailSender
    fileInfo.value.firstRegMailReceiveAddr = firstRegMailReceiveAddr
    fileInfo.value.lastRegMailSendDate = lastRegMailSendDate
  }
}
let missLoading = ref(false)
let claimMissFileData = ref([])
async function getClaimMissData() {
  let res = null
  missLoading.value = true
  try {
    const data = {
      desensitization: unref(isEyeOpen) ? '02' : '01',
      model: {
        claimNumber: fileInfo.value.claimNo
      }
    }
    res = await queryClaimMissList(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    missLoading.value = false
  }
  if (res?.isSuccess) {
    claimMissFileData.value = res.data || []
  }
}
const showFileDrawer = (record) => {
  const { claimNo, checkClaimsInputUrl } = record
  if (!claimNo) return
  allClose()
  fileInfo.value.claimNo = claimNo
  fileInfo.value.checkClaimsInputUrl = checkClaimsInputUrl
  getClaimMissData()
  getCiaimMissEmailInfo()
  fileOpen.value = true
}
const currentClickId = ref(null)
// 展开行
async function handleCellClick(record, column, bol) {
  if (column.key !== 'appealStatus') {
    return
  }
  currentClickId.value = record.claimNo
  record.isCorrectionClaimsFlag = bol
  if (!bol) {
    expandedRowKeys.value = []
    currentClickId.value = ''
    return
  }
  const olnyExpandOne = true // 只展开一行
  if (olnyExpandOne) {
    const { memberId, customerId } = unref(props.insuredInfo)
    let res = null
    loading.value = true
    try {
      const data = {
        desensitization: unref(isEyeOpen) ? '02' : '01',
        current: pagination.current,
        size: pagination.pageSize,
        customerId: customerId,
        memberId: memberId,
        claimNo: record.claimNo,
        visitorName: record.membersName
      }
      res = await queryAmendClaimList(data)
    } catch (err) {
      console.log('err', err)
    } finally {
      loading.value = false
    }
    if (res?.isSuccess) {
      innerData.value = res.data.map((item) => {
        return {
          ...item,
          isClaimFlag: false,
          isNoCompensationSummaryAmountFlag: false,
          isActualCompensationAmountFlag: false,
          isPaidStatusFlag: false,
          isAppealStatusFlag: false
        }
      })
    }
    expandedRowKeys.value = []
    expandedRowKeys.value.push(record.key)
    dataSource.value = dataSource.value.map((item, index) => {
      if (record.key === index) {
        return item
      } else if (record.key !== index) {
        return {
          ...item,
          isCorrectionClaimsFlag: false
        }
      }
    })
  } else {
    const index = expandedRowKeys.value.indexOf(record.key)
    if (index === -1) {
      expandedRowKeys.value.push(record.key)
    } else {
      expandedRowKeys.value.splice(index, 1)
    }
  }
}

// 获取列表数据
async function getClaimData() {
  const { memberId, customerId } = unref(props.insuredInfo)
  let res = null
  loading.value = true

  try {
    const data = {
      desensitization: unref(isEyeOpen) ? '02' : '01',
      current: pagination.current,
      size: pagination.pageSize,
      customerId: customerId,
      memberId: memberId
    }
    res = await queryClaimList(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    loading.value = false
  }
  if (res?.isSuccess) {
    dataSource.value = res.data.records.map((item, index) => {
      return {
        ...item,
        isClaimFlag: false,
        isNoCompensationSummaryAmountFlag: false,
        isActualCompensationAmountFlag: false,
        isPaidStatusFlag: false,
        isAppealStatusFlag: false,
        isCorrectionClaimsFlag: false,
        key: index
      }
    })
    pagination.total = Number(res.data.total)
  }
}

// 跳转更多理赔
function toClaim() {
  const { memberId, customerId } = unref(props.insuredInfo)
  router.push({
    path: '/claim/index',
    query: {
      ...route.query,
      memberId,
      customerId
    }
  })
}

// 关闭所有窗口
function allClose() {
  dataSource.value = dataSource.value.map((item) => {
    return {
      ...item,
      isClaimFlag: false,
      isNoCompensationSummaryAmountFlag: false,
      isActualCompensationAmountFlag: false,
      isPaidStatusFlag: false,
      isAppealStatusFlag: false
    }
  })
  innerData.value = innerData.value.map((item) => {
    return {
      ...item,
      isClaimFlag: false,
      isNoCompensationSummaryAmountFlag: false,
      isActualCompensationAmountFlag: false,
      isPaidStatusFlag: false,
      isAppealStatusFlag: false
    }
  })
}

function getPopupContainer(triggerNode) {
  return triggerNode.parentNode.parentNode
}
function getPopupContainers(triggerNode) {
  return triggerNode.parentNode
}
// 理赔号跳转
function toCheckClaims(url) {
  if (!url) return
  window.open(url)
}
function rowClassName(record) {
  return record.claimNo === currentClickId.value ? 'claim-row-active' : ''
}
// 剩余Ob跳转
function handleClickRestOb(record) {
  // if (!record.restOBAmount) return
  // router.push({
  //   path: '/ob/index',
  //   query: {
  //     ...route.query,
  //     memberId: record.memberId,
  //     customerId: record.customerId,
  //     claimNo: record.claimNo
  //   }
  // })
}
// 理赔号跳转
function handleClickClaimNo(record) {
  if (!record.claimNo) return
  router.push({
    path: '/claim/claimList',
    query: {}
  })
}
</script>
<template>
  <div>
    <div class="claim-info">
      <div class="common-info-header">
        <span class="common-info-header-name"> {{ $t('home.claim.ClaimsInfo') }} </span>
        <div class="line"></div>
        <div class="link cursor-pointer" @click="allClose">
          <svg-icon size="14" name="home-close" />
          {{ $t('home.claim.ClosePopup') }}
        </div>
        <!-- <div class="link cursor-pointer" @click="toClaim">
          <svg-icon size="14" name="home-more" />
          {{ $t('home.claim.MoreClaims') }}
        </div> -->
      </div>
      <div class="claim-info-main">
        <a-table
          :pagination="pagination"
          tableLayout="fixed"
          :bordered="false"
          :scroll="{ x: '1920px' }"
          class="ant-table-striped"
          :class="{ 'table-min-height': dataSource.length }"
          :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          size="middle"
          :loading="loading"
          :dataSource="dataSource"
          :rowClassName="rowClassName"
          :columns="dynamicClaimInfoColumns"
          :expandIconAsCell="false"
          :expandIconColumnIndex="-1"
          :expandedRowKeys="expandedRowKeys"
        >
          <template #bodyCell="{ column, text, record }">
            <!-- 理赔号 -->
            <template v-if="column.key === 'claimNo'">
              <span
                class="text-decortion cursor-pointer"
                :class="{ 'text-decortion-red': record.isRed }"
                v-if="text"
                @click="toCheckClaims(record.checkClaimsInputUrl)"
                >{{ text }}</span
              >
              <span v-else>{{ formatColumn(text) }}</span>
            </template>
            <!-- 理赔状态 -->
            <template v-else-if="column.key === 'claimStatus'">
              <span>{{ formatColumn(text) }}</span>
              <div class="describe" v-if="record.claimStatus">
                <svg-icon
                  class="question cursor-pointer"
                  size="14"
                  name="home-query"
                  v-if="text"
                  @click="record.isClaimFlag = true"
                />
                <a-popover
                  :open="record.isClaimFlag"
                  class="popover"
                  :autoAdjustOverflow="true"
                  :getPopupContainer="getPopupContainer"
                >
                  <template #content>
                    <div class="popover-content">
                      <div class="popover-btn-box">
                        <span>操作人</span>
                        <svg-icon
                          class="home-popover-close cursor-pointer"
                          name="home-popover-close"
                          @click="record.isClaimFlag = false"
                        >
                        </svg-icon>
                      </div>
                      <div v-if="record.caseRegistrar">登记人：{{ record.caseRegistrar }}</div>
                      <div v-if="record.firstScanOperator">
                        扫描人：{{ record.firstScanOperator }}
                      </div>
                      <div v-if="record.entryOperator">录入人：{{ record.entryOperator }}</div>
                      <div v-if="record.processOperator">核赔人：{{ record.processOperator }}</div>
                      <div v-if="record.auditOperator">审批人：{{ record.auditOperator }}</div>
                      <div v-if="record.checkOperator">预付确认人：{{ record.checkOperator }}</div>
                      <div v-if="record.paymentOperator">付款人：{{ record.paymentOperator }}</div>
                    </div>
                  </template>
                </a-popover>
              </div>
            </template>
            <!-- 子任务状态 -->
            <template v-else-if="column.key === 'subTaskStatus'">
              <span
                class="text-decortion cursor-pointer"
                :class="{ 'text-decortion-red': record.isRed }"
                v-if="text"
                @click="showDrawer(record)"
                >{{ text }}</span
              >
              <span v-else>{{ formatColumn(text) }}</span>
            </template>
            <!-- 当前是否缺件 -->
            <template v-else-if="column.key === 'isIncompleteNowCodeDesc'">
              <span
                class="text-decortion cursor-pointer"
                :class="{ 'text-decortion-red': record.isRed }"
                v-if="text"
                @click="showFileDrawer(record)"
                >{{ text }}</span
              >
              <span v-else>{{ formatColumn(text) }}</span>
            </template>
            <!-- 不赔付金额 -->
            <template v-else-if="column.key === 'noCompensationSummaryAmount'">
              <span>{{ formatColumn(text) }}</span>
              <div class="describe" v-if="record.isSupplementaryExplanation">
                <svg-icon
                  class="question cursor-pointer"
                  size="14"
                  name="home-query"
                  v-if="text"
                  @click="record.isNoCompensationSummaryAmountFlag = true"
                />
                <a-popover
                  :open="record.isNoCompensationSummaryAmountFlag"
                  class="popover"
                  :getPopupContainer="getPopupContainer"
                >
                  <template #content>
                    <div class="popover-content">
                      <div class="popover-btn-box">
                        <span>理算不赔项金额</span>
                        <svg-icon
                          class="home-popover-close cursor-pointer"
                          name="home-popover-close"
                          @click="record.isNoCompensationSummaryAmountFlag = false"
                        >
                        </svg-icon>
                      </div>
                      <div v-if="record.cobInv">社会其它保险赔付金额：{{ record.cobInv }}</div>
                      <div v-if="record.providerCopayInv">
                        医院自付额：{{ record.providerCopayInv }}
                      </div>
                      <div v-if="record.policyDeductInv">
                        个人免赔额：{{ record.policyDeductInv }}
                      </div>
                      <div v-if="record.policyCopayInv">
                        个人自付额：{{ record.policyCopayInv }}
                      </div>
                      <div v-if="record.otherCopayInv">其他自付额：{{ record.otherCopayInv }}</div>
                      <div v-if="record.overchargedByProviderInv">
                        医院多收：{{ record.overchargedByProviderInv }}
                      </div>
                    </div>
                  </template>
                </a-popover>
              </div>
            </template>
            <!-- 实际赔付金额 -->
            <template v-else-if="column.key === 'actualCompensationAmount'">
              <span>{{ formatColumn(text) }}</span>
              <div class="describe" v-if="record.isActualCompensationAmount">
                <svg-icon
                  class="question cursor-pointer"
                  size="14"
                  name="home-query"
                  v-if="text"
                  @click="record.isActualCompensationAmountFlag = true"
                />
                <a-popover
                  :open="record.isActualCompensationAmountFlag"
                  class="popover"
                  :getPopupContainer="getPopupContainer"
                >
                  <template #content>
                    <div class="popover-content">
                      <div class="popover-btn-box">
                        <span>赔付抵扣金额</span>
                        <svg-icon
                          class="home-popover-close cursor-pointer"
                          name="home-popover-close"
                          @click="record.isActualCompensationAmountFlag = false"
                        >
                        </svg-icon>
                      </div>
                      <div v-if="record.oboffsetAmount">OB抵扣：{{ record.oboffsetAmount }}</div>
                      <div v-if="record.transferFeeRefund">
                        手续费偿还：{{ record.transferFeeRefund }}
                      </div>
                      <div v-if="record.transferFee">外汇手续费{{ record.transferFee }}</div>
                    </div>
                  </template>
                </a-popover>
              </div>
            </template>
            <!-- 付款状态 -->
            <template v-else-if="column.key === 'paidStatus'">
              <span>{{ formatColumn(text) }}</span>
              <div class="describe" v-if="record.isPaidStatus">
                <svg-icon
                  class="question cursor-pointer"
                  size="14"
                  name="home-query"
                  v-if="text"
                  @click="record.isPaidStatusFlag = true"
                />
                <a-popover
                  :open="record.isPaidStatusFlag"
                  class="popover"
                  :getPopupContainer="getPopupContainer"
                >
                  <template #content>
                    <div class="popover-content">
                      <div class="popover-btn-box">
                        <span>付款详情</span>
                        <svg-icon
                          class="home-popover-close cursor-pointer"
                          name="home-popover-close"
                          @click="record.isPaidStatusFlag = false"
                        >
                        </svg-icon>
                      </div>
                      <div v-if="record.claimPayee">收款人：{{ record.claimPayee }}</div>
                      <div v-if="record.accountNumber">银行账号：{{ record.accountNumber }}</div>
                      <div v-if="record.bankName">收款银行：{{ record.bankName }}</div>
                      <div v-if="record.paidDate">付款日期：{{ record.paidDate }}</div>
                      <div v-if="record.thisClaimActualCompensationAmount">
                        本理赔实际赔付金额：{{ record.thisClaimActualCompensationAmount }}
                      </div>
                      <div v-if="record.payBatchAmount">
                        本次总付款金额：{{ record.payBatchAmount }}
                      </div>
                    </div>
                  </template>
                </a-popover>
              </div>
            </template>
            <!-- 剩余OB金额 -->
            <template v-else-if="column.key === 'restOBAmount'">
              <!-- <span
                :class="[text ? 'text-decortion cursor-pointer' : '']"
                @click="handleClickRestOb(record)"
              >
                {{ formatColumn(text) }}</span
              > -->
              {{ formatColumn(text) }}
            </template>
            <!-- 关联理赔状态 -->
            <template v-else-if="column.key === 'appealStatus'">
              <div class="appeal-status">
                <span>{{ formatColumn(text) }}</span>
                <div class="describe" v-if="record.isAppealStatus">
                  <svg-icon
                    class="question cursor-pointer"
                    size="14"
                    name="home-query"
                    v-if="text"
                    @click="record.isAppealStatusFlag = true"
                  />
                  <a-popover
                    :open="record.isAppealStatusFlag"
                    class="popover"
                    :getPopupContainer="getPopupContainer"
                  >
                    <template #content>
                      <div class="popover-content">
                        <div class="popover-btn-box">
                          <span>申诉详情</span>
                          <svg-icon
                            class="home-popover-close cursor-pointer"
                            name="home-popover-close"
                            @click="record.isAppealStatusFlag = false"
                          >
                          </svg-icon>
                        </div>
                        <div v-if="record.appealReason">申诉原因：{{ record.appealReason }}</div>
                        <div v-if="record.appealDate">申诉提交日期：{{ record.appealDate }}</div>
                      </div>
                    </template>
                  </a-popover>
                </div>

                <div class="icon-box">
                  <svg-icon
                    v-if="record.isCorrectionClaims && !record.isCorrectionClaimsFlag"
                    @click="handleCellClick(record, column, true)"
                    class="appeal-status-icon cursor-pointer"
                    size="14"
                    name="unfold-icon"
                  />

                  <svg-icon
                    v-if="record.isCorrectionClaims && record.isCorrectionClaimsFlag"
                    @click="handleCellClick(record, column, false)"
                    class="appeal-status-icon cursor-pointer"
                    size="14"
                    name="pack-up-icon"
                  />
                </div>
              </div>
            </template>
            <template v-else>
              <span>{{ formatColumn(text) }}</span>
            </template>
          </template>
          <template #expandedRowRender>
            <a-table
              class="ant-table-sub-striped"
              :columns="dynamicInnerColumns"
              :data-source="innerData"
              :pagination="false"
            >
              <template #bodyCell="{ column, text, record }">
                <!-- 理赔号 -->
                <template v-if="column.key === 'claimNo'">
                  <span
                    class="text-decortion cursor-pointer"
                    :class="{ 'text-decortion-red': record.isRed }"
                    v-if="text"
                    @click="toCheckClaims(record.checkClaimsInputUrl)"
                    >{{ text }}</span
                  >
                  <span v-else>{{ formatColumn(text) }}</span>
                </template>
                <!-- 理赔状态 -->
                <template v-else-if="column.key === 'claimStatus'">
                  <span>{{ formatColumn(text) }}</span>
                  <div class="describe" v-if="record.claimStatus">
                    <svg-icon
                      class="question cursor-pointer"
                      size="14"
                      name="home-query"
                      v-if="text"
                      @click="record.isClaimFlag = true"
                    />
                    <a-popover
                      :open="record.isClaimFlag"
                      class="popover"
                      :autoAdjustOverflow="true"
                      :getPopupContainer="getPopupContainer"
                    >
                      <template #content>
                        <div class="popover-content">
                          <div class="popover-btn-box">
                            <span>操作人</span>
                            <svg-icon
                              class="home-popover-close cursor-pointer"
                              name="home-popover-close"
                              @click="record.isClaimFlag = false"
                            >
                            </svg-icon>
                          </div>
                          <div v-if="record.caseRegistrar">登记人：{{ record.caseRegistrar }}</div>
                          <div v-if="record.firstScanOperator">
                            扫描人：{{ record.firstScanOperator }}
                          </div>
                          <div v-if="record.entryOperator">录入人：{{ record.entryOperator }}</div>
                          <div v-if="record.processOperator">
                            核赔人：{{ record.processOperator }}
                          </div>
                          <div v-if="record.auditOperator">审批人：{{ record.auditOperator }}</div>
                          <div v-if="record.checkOperator">
                            预付确认人：{{ record.checkOperator }}
                          </div>
                          <div v-if="record.paymentOperator">
                            付款人：{{ record.paymentOperator }}
                          </div>
                        </div>
                      </template>
                    </a-popover>
                  </div>
                </template>
                <!-- 子任务状态 -->
                <template v-else-if="column.key === 'subTaskStatus'">
                  <span
                    class="text-decortion cursor-pointer"
                    :class="{ 'text-decortion-red': record.isRed }"
                    v-if="text"
                    @click="showDrawer(record)"
                    >{{ text }}</span
                  >
                  <span v-else>{{ formatColumn(text) }}</span>
                </template>
                <!-- 当前是否缺件 -->
                <template v-else-if="column.key === 'isIncompleteNowCodeDesc'">
                  <span
                    class="text-decortion cursor-pointer"
                    :class="{ 'text-decortion-red': record.isRed }"
                    @click="showFileDrawer(record)"
                    v-if="text"
                    >{{ text }}</span
                  >
                  <span v-else>{{ formatColumn(text) }}</span>
                </template>
                <!-- 不赔付金额 -->
                <template v-else-if="column.key === 'noCompensationSummaryAmount'">
                  <span>{{ formatColumn(text) }}</span>
                  <div class="describe" v-if="record.isSupplementaryExplanation">
                    <svg-icon
                      class="question cursor-pointer"
                      size="14"
                      name="home-query"
                      v-if="text"
                      @click="record.isNoCompensationSummaryAmountFlag = true"
                    />
                    <a-popover
                      :open="record.isNoCompensationSummaryAmountFlag"
                      class="popover"
                      :getPopupContainer="getPopupContainer"
                    >
                      <template #content>
                        <div class="popover-content">
                          <div class="popover-btn-box">
                            <span>理算不赔项金额</span>
                            <svg-icon
                              class="home-popover-close cursor-pointer"
                              name="home-popover-close"
                              @click="record.isNoCompensationSummaryAmountFlag = false"
                            >
                            </svg-icon>
                          </div>
                          <div v-if="record.cobInv">社会其它保险赔付金额：{{ record.cobInv }}</div>
                          <div v-if="record.providerCopayInv">
                            医院自付额：{{ record.providerCopayInv }}
                          </div>
                          <div v-if="record.policyDeductInv">
                            个人免赔额：{{ record.policyDeductInv }}
                          </div>
                          <div v-if="record.policyCopayInv">
                            个人自付额：{{ record.policyCopayInv }}
                          </div>
                          <div v-if="record.otherCopayInv">
                            其他自付额：{{ record.otherCopayInv }}
                          </div>
                          <div v-if="record.overchargedByProviderInv">
                            医院多收：{{ record.overchargedByProviderInv }}
                          </div>
                        </div>
                      </template>
                    </a-popover>
                  </div>
                </template>
                <!-- 实际赔付金额 -->
                <template v-else-if="column.key === 'actualCompensationAmount'">
                  <span>{{ formatColumn(text) }}</span>
                  <div class="describe" v-if="record.isActualCompensationAmount">
                    <svg-icon
                      class="question cursor-pointer"
                      size="14"
                      name="home-query"
                      v-if="text"
                      @click="record.isActualCompensationAmountFlag = true"
                    />
                    <a-popover
                      :open="record.isActualCompensationAmountFlag"
                      class="popover"
                      :getPopupContainer="getPopupContainer"
                    >
                      <template #content>
                        <div class="popover-content">
                          <div class="popover-btn-box">
                            <span>赔付抵扣金额</span>
                            <svg-icon
                              class="home-popover-close cursor-pointer"
                              name="home-popover-close"
                              @click="record.isActualCompensationAmountFlag = false"
                            >
                            </svg-icon>
                          </div>
                          <div v-if="record.oboffsetAmount">
                            OB抵扣：{{ record.oboffsetAmount }}
                          </div>
                          <div v-if="record.transferFeeRefund">
                            手续费偿还：{{ record.transferFeeRefund }}
                          </div>
                          <div v-if="record.transferFee">外汇手续费{{ record.transferFee }}</div>
                        </div>
                      </template>
                    </a-popover>
                  </div>
                </template>
                <!-- 付款状态 -->
                <template v-else-if="column.key === 'paidStatus'">
                  <span>{{ formatColumn(text) }}</span>
                  <div class="describe" v-if="record.isPaidStatus">
                    <svg-icon
                      class="question cursor-pointer"
                      size="14"
                      name="home-query"
                      v-if="text"
                      @click="record.isPaidStatusFlag = true"
                    />
                    <a-popover
                      :open="record.isPaidStatusFlag"
                      class="popover"
                      :getPopupContainer="getPopupContainer"
                    >
                      <template #content>
                        <div class="popover-content">
                          <div class="popover-btn-box">
                            <span>付款详情</span>
                            <svg-icon
                              class="home-popover-close cursor-pointer"
                              name="home-popover-close"
                              @click="record.isPaidStatusFlag = false"
                            >
                            </svg-icon>
                          </div>
                          <div v-if="record.claimPayee">收款人：{{ record.claimPayee }}</div>
                          <div v-if="record.accountNumber">
                            银行账号：{{ record.accountNumber }}
                          </div>
                          <div v-if="record.bankName">收款银行：{{ record.bankName }}</div>
                          <div v-if="record.paidDate">付款日期：{{ record.paidDate }}</div>
                          <div v-if="record.payBatchAmount">
                            本次总付款金额：{{ record.payBatchAmount }}
                          </div>
                        </div>
                      </template>
                    </a-popover>
                  </div>
                </template>
                <!-- 剩余OB金额 -->
                <template v-else-if="column.key === 'restOBAmount'">
                  <!-- <span
                    :class="[text ? 'text-decortion cursor-pointer' : '']"
                    @click="handleClickRestOb(record)"
                  >
                    {{ formatColumn(text) }}</span
                  > -->
                  {{ formatColumn(text) }}
                </template>
                <template v-else>
                  <span>{{ formatColumn(text) }}</span>
                </template>
              </template>
            </a-table>
          </template>
        </a-table>
      </div>
    </div>
    <a-drawer
      v-model:open="subTaskStatusOpen"
      class="claim-info-drawer"
      root-class-name="root-class-name"
      title="子任务状态"
      width="70%"
      placement="right"
      :maskClosable="false"
      @after-open-change="afterOpenChange"
    >
      <div class="claimNo">理赔号：{{ subTaskData.claimNo }}</div>
      <div class="table-item" v-if="subTaskPEDTOSource.length">
        <div class="table-item-title">PE调查</div>
        <a-table
          class="ant-table-sub-striped"
          :columns="subTaskPEDTOColumns"
          :data-source="subTaskPEDTOSource"
          :pagination="false"
        />
      </div>
      <div class="table-item" v-if="subTaskCIDTOSource.length">
        <div class="table-item-title">医学调查</div>
        <a-table
          class="ant-table-sub-striped"
          :columns="subTaskCIDTOColumns"
          :data-source="subTaskCIDTOSource"
          :pagination="false"
        />
      </div>
      <div class="table-item" v-if="subTaskPRDTOSource.length">
        <div class="table-item-title">预授权</div>
        <a-table
          class="ant-table-sub-striped"
          :columns="subTaskPRDTOColumns"
          :data-source="subTaskPRDTOSource"
          :pagination="false"
        >
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.key === 'preAuthNo'">
              <span
                class="text-decortion cursor-pointer"
                :class="{ 'text-decortion-red': record.isRed }"
                @click="
                  useCorePage({
                    preAuthNumber: record.preAuthNo,
                    type: 'preAuth'
                  })
                "
                >{{ text }}</span
              >
            </template>
            <template v-if="column.key === 'conclusion'">
              <span>{{ formatColumn(text) }}</span>
              <div class="describe" v-if="text && (record.medicalRemark || record.gopRemark)">
                <a-popover
                  class="popover"
                  trigger="click"
                  widht="500px"
                  color="rgba(0, 0, 0, 0.85)"
                  :autoAdjustOverflow="true"
                  :getPopupContainer="getPopupContainers"
                >
                  <template #content>
                    <div class="popover-content tootip">
                      <div v-if="record.medicalRemark">
                        医疗评估：{{ formatColumn(record.medicalRemark) }}
                      </div>
                      <div v-if="record.gopRemark">
                        担保函备注：{{ formatColumn(record.gopRemark) }}
                      </div>
                    </div>
                  </template>
                  <svg-icon
                    class="question cursor-pointer"
                    size="14"
                    inert
                    name="home-query"
                    v-if="text"
                  />
                </a-popover>
              </div>
            </template>
          </template>
        </a-table>
      </div>
      <div class="table-item" v-if="subTaskOtherDTOSource.length">
        <div class="table-item-title">其他子任务</div>
        <a-table
          class="ant-table-sub-striped"
          :columns="subTaskOtherDTOColumns"
          :data-source="subTaskOtherDTOSource"
          :pagination="false"
        />
      </div>
    </a-drawer>
    <a-drawer
      v-model:open="fileOpen"
      class="claim-info-drawer"
      root-class-name="root-class-name"
      title="理赔缺件页"
      width="70%"
      placement="right"
      :maskClosable="false"
    >
      <div class="claimNo">
        理赔号：
        <span class="claim-miss-link" @click="toCheckClaims(fileInfo.checkClaimsInputUrl)">
          {{ fileInfo.claimNo }}
        </span>
      </div>
      <div class="file-drawer-tip" v-if="fileInfo.firstRegMailSendStatus == '01'">
        登记邮件已发送，接受邮件地址：{{ formatColumn(fileInfo.firstRegMailReceiveAddr) }}，发送人：
        {{ formatColumn(fileInfo.firstRegMailSender) }}，最后一次发送时间：
        {{ formatColumn(fileInfo.lastRegMailSendDate) }}。
      </div>
      <a-table
        class="ant-table-miss-striped"
        :columns="claimFileColumns"
        :loading="missLoading"
        size="middle"
        :data-source="claimMissFileData"
        :pagination="false"
      >
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.key === 'missingDocRemark'">
            <span class="break-word">{{ formatColumn(text) }}</span>
          </template>
        </template>
      </a-table>
    </a-drawer>
  </div>
</template>
<style>
.claim-row-active {
  background: #ebf2f6;
}
</style>
<style lang="scss" scoped>
:deep(.break-word) {
  word-break: break-all;
}
.common-info-header {
  display: flex;
  align-items: center;
  padding: 0 10px;
  &-name {
    min-width: 90px;
    display: inline-block;
    font-weight: bold;
    font-size: 22px;
    color: $color-text-primary;
    margin-right: 20px;
  }
  .line {
    flex: 1;
    height: 1px;
    border: 1px dashed #d3deea;
  }
  .link {
    padding: 0 10px 0 20px;
    font-weight: bold;
    font-size: 16px;
    color: #4d789c;
    display: flex;
    align-items: center;
    .svg-icon {
      margin-right: 6px;
    }
  }
}
.claim-row-active {
  background: #ebf2f6;
}
.ant-table-expanded-row {
  box-shadow: 0px 3px 6px 0px rgba(0, 34, 48, 0.12);

  > .ant-table-cell {
    padding: 12px 0 !important;
  }
}
.home-popover-close {
  font-size: 12px;
  margin-left: 20px;
}
.popover-btn-box {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  align-items: center;
  margin-bottom: 5px;
}
.popover-content {
  white-space: nowrap;
}
.tootip {
  color: #fff;
}
.popover-btn {
  width: 60px;
  height: 32px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #dfdfdf;
  font-family: PingFang-SC, PingFang-SC;
  font-weight: 500;
  font-size: 14px;
  color: $color-text-regular;
  margin-top: 5px;
}
.claim-info-drawer {
  .ant-table-cell {
    word-break: break-all;
  }
  .ant-popover {
    top: -140px !important;
    .popover-content {
      width: 500px;
      white-space: wrap;
    }
  }
  .ant-drawer-close {
    position: absolute;
    right: 10px;
  }
  .claimNo {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 14px;
    color: $color-text-primary;
    margin-bottom: 21px;
  }
  .claim-miss-link {
    cursor: pointer;
    text-decoration: underline;
    color: $color-action;
  }
  .file-drawer-tip {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 20px;
    color: $color-text-regular;
  }
  .table-item-title {
    height: 14px;
    border-left: 3px solid #4d789c;
    padding-left: 9px;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 14px;
    color: $color-text-primary;
    margin-bottom: 14px;
    margin-top: 31px;
  }
  .text-decortion {
    font-weight: 400;
    font-size: 14px;
    color: #4d789c;
    text-decoration: underline;
  }
  .text-decortion:hover {
    color: #97b7c5;
  }
  .text-decortion-red {
    color: #cf595d;
  }
  .describe {
    display: inline-block;
    position: relative;
  }

  .question {
    margin-left: 7px;
    position: absolute;
    bottom: -2px;
    color: #999;
  }
}

.claim-info {
  .ant-table-striped.table-min-height {
    .ant-table-content {
      min-height: 320px;
    }
  }
  .ant-table-striped .table-striped td {
    background-color: #fafafa;
  }
  .ant-table-striped td,
  .ant-table-striped th {
    border-top: transparent !important;
    border-bottom: transparent !important;
  }

  .ant-table-sub-striped {
    background: #f9fdfe;
    .ant-spin-container {
      box-shadow: 0px 3px 6px 0px rgba(0, 34, 48, 0.12);
      background: #f9fdfe;
    }
    .ant-table-thead {
      .ant-table-cell {
        background: #f9fdfe;
      }
    }

    .ant-table-content {
      background: #f9fdfe;
      min-height: auto !important;
    }
  }
  .ant-table-miss-striped {
    .ant-table-tbody {
      .ant-table-cell {
        word-break: break-all;
      }
    }
    .break-word {
      word-break: break-all;
    }
  }

  &-main {
    padding: 20px 24px;
    margin-top: 20px;
    background: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(0, 58, 84, 0.08);
    border-radius: 10px;
    .operation {
      color: $color-action;
    }
    .text-decortion {
      font-weight: 400;
      font-size: 14px;
      color: #4d789c;
      text-decoration: underline;
    }
    .text-decortion:hover {
      color: #97b7c5;
    }
    .text-decortion-red {
      color: #cf595d;
    }
    .describe {
      display: inline-block;
      position: relative;
    }
    .appeal-status {
      display: flex;
      align-items: center;
      .question {
        position: static;
        margin-left: 7px;
      }
      .icon-box,
      .describe {
        padding-top: 5px;
      }
      .appeal-status-icon {
        color: #fff;
        margin-left: 7px;
      }
    }
    .question {
      margin-left: 7px;
      position: absolute;
      bottom: -2px;
      color: #999;
    }

    .dialog {
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      .ant-popover-content {
        padding: 10px 15px;
        .btn {
          width: 60px;
          height: 32px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #dfdfdf;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 14px;
          color: $color-text-regular;
        }
      }
    }
    .splice-line {
      display: inline-block;
      margin: 0px 12px;
      height: 14px;
      width: 1px;
      background-color: rgb(223, 223, 223);
    }
  }
}
</style>
